<template>
  <div>
    <ul>
      <li v-for="i in subscribers" :key="i.userId">
        <img :src="i.avatarUrl" alt=""> {{i.nickname}}
      </li>
     
    </ul>
    <div class="no" v-if="subscribers.length==0">
       暂无收藏者
     </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      subscribers:[]
    }
  },
  mounted(){
    this.$request({
      url:'/playlist/subscribers',
      params:{
        id:this.$route.query.id
      }
    }).then(success=>{
      this.subscribers=success.data.subscribers
    })
  }
};
</script>

<style scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul li {
  width: 400px;
  height: 100px;
  margin-bottom: 20px;
}
li img{
  height: 100px;
  width: 100px;
  border-radius: 100px;
  vertical-align: middle;
 
  margin-right: 20px;
}
.no{
  color: gray;
  line-height: 2.5em;
}
</style>